<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const vNode = {
      tag: "div",
      attrs: {
        id: "app",
      },
      children: [
        {
          tag: "h1",
          attrs: {
            class: "hehe",
            id: "xixi",
          },
          children: ["Hello, world!"],
        },
        {
          tag: "p",
          children: ["This is a paragraph."],
        },
      ],
    };
    function render(vnode) {
      if (typeof vnode === "string") {
        return document.createTextNode(vnode);
      }
      const el = document.createElement(vnode.tag);
      if (vnode.attrs) {
        for (const [key, value] of Object.entries(vnode.attrs)) {
          el.setAttribute(key, value);
        }
      }
      if (vnode.children) {
        for (const child of vnode.children) {
          el.appendChild(render(child));
        }
      }

      return el;
    }
    console.log(render(vNode));
  </script>
</html>
